<template>
  <ul class="list">
    <!-- v-for 把Vuex的数据 渲染到页面上 -->
    <li v-for="item in mlist" :key="item.id">
      <!-- 设置点击事件 点击后 携带id值 跳转到详情页 -->
      <a @click="handleJump(item.id)">
        <img :src=" item.img">
        <div class="info">
          <h3>{{item.title}}</h3>
          <p>豆瓣评分：8</p>
          <!-- 默认的数据的 字符串 遍历需要把他们转换为 字符串数组 需要用到 split()方法转换为字符串数组 -->
          <p><span class="tag" :key='index' v-for='(tag, index) in item.tags.split(",")'>{{tag}}</span></p>
        </div>
      </a>
    </li>
  </ul>
</template>
<script>
// 创建基于某个命名空间辅助函数 用来导入 Vuex组件化的数据
import { createNamespacedHelpers } from 'vuex'
// ~ 导入Vuex的mapState 获取 Vuex的state数据
// ~ 导入mapActions 让Vuex获取服务器异步数据
// 导入Vuex 的组件化数据
// const { 用到的Vuex单一状态数(就是那四个值) } = createNamespacedHelpers('拆分的组件名')
const { mapState, mapActions } = createNamespacedHelpers('list')
export default {
  name: 'HotMovie',
  computed: {
    // ~ 导入Vuex的mapState 获取Vuex的state数据
    ...mapState(['mlist'])
  },
  methods: {
    // ~ 获取服务器异步数据的 导入Vuex的异步获取 mapActions方法
    ...mapActions(['movelist']),
    //! 设置动态路由 携带id值 跳转到详情页
    handleJump (id) {
      this.$router.push({ // $router.push 是路由跳转
        path: '/detail', // name是该路径的别名 需要给路由组件设置一样名称 作用跟path一样 动态跳转
        query: { // 携带搜索关键字的数据 左边属性名 需要和 设置的?后面路径一致 右边是要携带的属性值
          // 携带搜索关键字的数据 左边属性名 需要和 设置的?后面路径一致 右边是要携带的属性值
          id
        }
      })
    }
  },
  created () {
    // ~ 声明周期 页面加载时候 调用异步获取Vuex方法 获取服务器数据
    // this.$store.dispatch('movelist')
    this.movelist()
  }
}
</script>
